// 报修来源同比环比分析 柱状图
import type { barChartDataListType, datasetBarChartDataListType, barChartTooltip } from './typings'
import { defineComponent, reactive, onMounted, watch, markRaw } from 'vue'
import useVuexGetters from '~/hooks/useVuexGetters'
import * as echarts from 'echarts'

export default defineComponent({
  name: 'BarChart',
  props: ['dataList'],
  setup(props: { dataList: barChartDataListType['source'] } = { dataList: [['']] }) {
    const state = reactive<datasetBarChartDataListType>({
      // 图表数据
      dataset: {
        source: [['product', '当月', '上月', '去年同期']],
        barWidth: ''
      }
    })
    const assetOverviewVuexState = useVuexGetters('assetOverview', ['customColorList'])

    watch(
      () => props.dataList,
      () => {
        barInit()
      }
    )

    onMounted(() => {
      createBarInit()
    })

    // methods
    // 初始化echarts实例
    const createBarInit = () => {
      const dom = document.getElementById('content')
      state.myChart = markRaw(echarts.init(dom!))
    }

    // 绘图
    const barInit = () => {
      state.dataset.source = [
        ['product', '当月', '上月', '去年同期'] // 小图标注释
      ]
      props.dataList.forEach((item) => {
        state.dataset.source.push(item)
      })

      // 绘制图表
      if (props.dataList.length <= 3) {
        // 数据未超3条时, x轴字幕横着展示, 柱宽定
        state.myChart.clear()
        state.myChart.setOption({
          legend: {
            // 小注释
            itemHeight: 14,
            itemWidth: 14,
            icon: 'roundRect',
            x: 'right',
            y: 'top'
          },
          tooltip: {
            trigger: 'item',
            position: 'top',
            formatter: function (name: barChartTooltip) {
              return `${name.seriesName}: ${name.value[name.seriesIndex + 1]}`
            }
          },
          dataset: state.dataset,
          xAxis: {
            type: 'category',
            axisLabel: {
              // 轴字
              textStyle: {
                color: 'gray'
              }
            },
            axisLine: {
              // 轴线
              show: true,
              lineStyle: {
                color: 'lightGray'
              }
            },
            axisTick: {
              // 刻度
              show: false
            }
          },
          yAxis: {
            name: '数量',
            color: 'gray',
            axisLabel: {
              // 不同处1
              textStyle: {
                color: 'gray'
              }
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: 'lightGray'
              }
            }
          },
          barWidth: 60, // 不同处2
          series: [
            {
              type: 'bar',
              color: assetOverviewVuexState.customColorList.value[0]
            },
            {
              type: 'bar',
              color: assetOverviewVuexState.customColorList.value[1]
            },
            {
              type: 'bar',
              color: assetOverviewVuexState.customColorList.value[2]
            }
          ]
        })
      } else {
        // 数据超过3条时, x轴字幕倾斜展示, 柱宽不定
        state.myChart.clear()
        state.myChart.setOption({
          legend: {
            // 小注释
            itemHeight: 14,
            itemWidth: 14,
            icon: 'roundRect',
            x: 'right',
            y: 'top'
          },
          tooltip: {
            trigger: 'item',
            position: 'top',
            formatter: function (name: barChartTooltip) {
              return `${name.seriesName}: ${name.value[name.seriesIndex + 1]}`
            }
          },
          dataset: state.dataset,
          xAxis: {
            // x轴
            type: 'category',
            axisLabel: {
              // 轴字
              interval: 0, // 不同处1
              rotate: 30,
              textStyle: {
                color: 'gray'
              }
            },
            axisLine: {
              // 轴线
              show: true,
              lineStyle: {
                color: 'lightGray'
              }
            },
            axisTick: {
              // 刻度
              show: false
            }
          },
          yAxis: {
            // y轴
            name: '数量',
            nameTextStyle: {
              color: 'gray'
            },
            axisLabel: {
              textStyle: {
                color: 'gray'
              }
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: 'lightGray'
              }
            }
          },
          barWidth: '', // 不同处2
          series: [
            {
              type: 'bar',
              color: assetOverviewVuexState.customColorList.value[0]
            },
            {
              type: 'bar',
              color: assetOverviewVuexState.customColorList.value[1]
            },
            {
              type: 'bar',
              color: assetOverviewVuexState.customColorList.value[2]
            }
          ]
        })
      }

      // 建议加上以下这一行代码，不加的话，当浏览器窗口缩小时，超过div界限
      window.addEventListener('resize', function () {
        state.myChart.resize()
      })
    }

    return () => <div id="content" style={'height: 450px'}></div>
  }
})
